<template>
    <div>
        <h5>查询参数</h5>
        <p>转存到仓库的参数(因为路由缓存的问题-在同路径下参数变化的切换不会触发生命周期，所以数据未更新)</p>
        <pre>{{ query }}</pre>
        <p>直接通过$route获取的参数</p>
        <pre>{{ $route.query }}</pre>
        <p>通过路由提供的beforeRouteUpdate加载更新数据</p>
        <pre>{{ query2 }}</pre>
        <input type="button" value="手动加载查询参数" @click="getQuery()">
        <input type="button" value="$route加载查询参数" @click="getQuery2()">

    </div>
</template>

<script>
import Qs from "qs";
    export default {
        data() {
            return {
                query: {},
                query2:{}
            }
        },
        methods: {
            getQuery() {
                let hash = location.hash;
                // console.log(hash)
                let query = hash.split("?")[1];
                // console.log(query);
                query = Qs.parse(query);
                // console.log(query);
                this.query = query;
            },
            getQuery2(){
                this.query2 = this.query = this.$route.query;
            }
        },
        created(){
            console.log("QueryRouter.vue 的 created")
            console.log( this.$route.query )
            this.getQuery2();
        },
        unmounted(){
            console.log("QueryRouter.vue 的 unmounted")
        },
        beforeRouteUpdate(to,from){
            console.group("QueryRouter.vue - beforeRouteUpdate")
            console.log( "想要访问的路由组件:",to )
            console.log( "当前正在访问的路由组件:",from )
            console.groupEnd()
            // this.query2 = this.$route.query;
            this.query2 = to.query;
        }
    }
</script>

<style lang="scss" scoped>

</style>